<template>
  <div class="contaiter">
    <el-form
      ref="practiceExperience"
      :model="practiceExperience"
      label-position="left"
      label-width="150px"
      :rules="rules"
    >
      <el-form-item label="项目名称" required prop="practiceName">
        <span slot="label" class="left-label">
          <span calss="cn-label">项目名称</span><br>
          <span class="en-label">practice Name</span>
        </span>
        <el-input
          v-model="practiceExperience.practiceName"
          placeholder="请输入项目名称"
          style="width: 50%"
        />
      </el-form-item>
      <el-form-item label="项目时间" required prop="endTime">
        <span slot="label" class="left-label">
          <span calss="cn-label">项目时间</span><br>
          <span class="en-label">practice Period</span>
        </span>
        <el-date-picker
          v-model="practiceExperience.endTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="项目描述" required prop="practiceDescription">
        <span slot="label" class="left-label">
          <span calss="cn-label">项目描述</span><br>
          <span class="en-label">practice Description</span>
        </span>
        <el-input
          v-model="practiceExperience.practiceDescription"
          placeholder="更完善的项目信息有助于HR快速找到你为保护隐私，请不要填写手机，QQ，微信等联系方式"
          type="textarea"
          maxlength="2000"
          show-word-limit
          :rows="4"
        />
      </el-form-item>
      <el-form-item label=" ">
        <el-button @click="cancel">取消</el-button>
        <el-button
          type="primary"
          @click="submitForm('practiceExperience')"
        >确定</el-button>
        <el-popconfirm
          v-if="showDel"
          title="确定删除吗？"
          class="delete-icon"
          @confirm="deleteConfirm"
        >
          <i slot="reference" class="delete-icon" />
        </el-popconfirm>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      educateClassy: [
        { label: '全日制', value: '1' },
        { label: '非全日制', value: '0' }
      ],
      practiceExperience: {
        practiceName: '', // 实践\活动名称
        beginTime: '', // 实践\活动开始时间
        endTime: '', // 实践\活动结束时间
        practiceDescription: '' // 实践\活动描述
      },
      rules: {
        practiceName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '请选择项目时间', trigger: 'change' }
        ],
        practiceDescription: [
          { required: true, message: '请输入项目描述', trigger: 'blur' }
        ]
      },
      index: null,
      showDel: false
    }
  },
  created() {},
  mounted() {},
  methods: {
    businessAreaChange(e) {
      console.log(e)
    },
    handleCityChange(e) {
      console.log(e)
    },
    cancel() {
      this.practiceExperience = {
        practiceName: '', // 实践\活动名称
        beginTime: '', // 实践\活动开始时间
        endTime: '', // 实践\活动结束时间
        practiceDescription: '' // 实践\活动描述
      }
      this.showDel = false
      this.$parent.$parent.closeFun('practiceExperience')
      this.index = null
      this.$nextTick(() => {
        this.$refs['practiceExperience'].clearValidate()
      })
    },
    deleteConfirm() {
      this.$parent.$parent.deleteFun('practiceExperience', this.index)
      this.cancel()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = JSON.parse(JSON.stringify(this.practiceExperience))
          const arr = data.endTime
          data.beginTime = arr[0].split('T')[0]
          data.endTime = arr[1].split('T')[0]
          this.$parent.$parent.upDate(
            'practiceExperience',
            data,
            this.index
          )
          this.cancel()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    init(data, index) {
      data = JSON.parse(JSON.stringify(data))
      data.resignationTime = [data.entryTime, data.resignationTime]
      this.practiceExperience = data
      this.index = index
      this.showDel = true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-date-editor .el-range-separator{
  padding: 0;
}
.delete-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url("../../../../assets/images/delete_icon.png") no-repeat center
    center / cover;
}
::v-deep .el-textarea__inner{
  padding-right: 65px;
}
</style>
